<template>
	<view>
		<view class="resylt_top">
			<view class="resylt_top_img">
				<image src="/static/curr/back_resu.png" mode=""></image>
			</view>
			<view class="resylt_top_text">
				<view class="">
					测评报告
				</view>
				<view class="resylt_top_text_time">
					测评时间: {{ $u.timeFormat(nowTime, 'yyyy-mm-dd hh:MM:ss') }}
				</view>
			</view>
		</view>
		<view class="resylt_box">
			<view class="resylt_box_tx">
				<image src="/static/deletedimg/touxiang.png" mode=""></image>
			</view>
			<view class="resylt_box_xin d-b-c f-w">
				<view class="resylt_box_xin_item">
					姓名: <text class="gray6">{{ nickname }}</text>
				</view>
				<view class="resylt_box_xin_item">
					年级: <text class="gray6">{{ grade }}</text>
				</view>
				<view class="resylt_box_xin_item">
					学校: <text class="gray6">{{ school }}</text>
				</view>
				<view class="resylt_box_xin_item">
					电话: <text class="gray6">{{ mobile }}</text>
				</view>
			</view>
			<!-- 分级表 -->
			<view class="">
				<view class="cengji_box">
					<image src="/static/curr/rese_cenji.png" mode=""></image>
					<view class="cengji_box1">
						3885
					</view>
					<view class="cengji_box2">
						1760
					</view>
					<view class="cengji_box3">
						650
					</view>
					<view class="cengji_box4">
						240
					</view>
				</view>
			</view>
			<view class="mt60 tc f24 gray6">
				词汇水平分级表
			</view>
			<!-- 柱状图 -->
			<view class="resylt_box_char">
				<template>
					<view class="charts-box">
						<qiun-data-charts type="mount" :opts="opts" :chartData="chartData" />
					</view>
				</template>
				<view class="mt60 tc f24 gray6">
					测评结果对比图
				</view>
			</view>
			<view class="resylt_box_text">
				<view class="f30 fb">
					测试结果分析
				</view>
				<view class="mt36 gray6 f24">
					{{ analyse }}
					<!-- 经小白免单词测试，你的词汇量相当于<text class="fb" style="color: #387BEF;">{{resuljd}},</text><text>{{resulttexe}}</text> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				nowTime: new Date(),
				mobile: '18888888888',
				nickname: '测试用户',
				grade: 1,
				school: '中科大附中',
				analyse: '',
				// resuljd:'小学初级阶段',
				// resulttexe:'，处于英语学习启蒙阶段和英语学习起步期。关键在于英语单词的识记，单词量少，后期学习起来就困难，找到正确的方法，扩大词汇量，多多练习，提升词汇量，增加语感。建议识记日常用语和小学考纲词汇，学说简单的日常用语。培养英语学习的兴趣和习惯，后期学习简单易懂。',
				chartData: {},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['mount'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。https://www.ucharts.cn/v2/#/document/index
				opts: {
					color: ["#72C245", "#5079FF"],
					padding: [15, 15, 0, 5],
					enableScroll: false,
					dataLabel: false,
					fontColor:'#999999',
					legend: {
						show: false
					},
					xAxis: {
						disableGrid: true,
						marginTop:10,
						fontColor:'#999999',
					},
					yAxis: {
						gridColor: '#f4f4f5',
						// splitNumber: 9,
						// data: [{
						// 	min: 0,
						// 	max: 9000
						// }]
					},
					extra: {
						mount: {
							type: "bar",
							widthRatio: 0.4

						}
					}
				},
				gradeList: ['一年级', '二年级', '三年级', '四年级', '五年级', '六年级', '初一', '初二', '初三', '高一', '高二', '高三'],
			}
		},
		onLoad(option) {
			let score = 0
			if (option.score) {
				score = option.score
			}
			this.getReport(score)
			if (uni.getStorageSync('userInfo')) {
				let userInfo = uni.getStorageSync('userInfo')
				this.mobile = userInfo.mobile
				this.nickname = userInfo.nickname
				this.grade = this.gradeList[userInfo.grade - 1]
				this.school = userInfo.school
			}
		},
		onBackPress(option) {
			if (option.from == 'navigateBack' || option.from == 'backbutton') {
				uni.reLaunch({
					url: '/pages/user/user'
				})
				return true
			}
			return false
		},
		methods: {
			getReport(score) {
				this.$u.post(this.$u.api.testReport, {
					score: score
				}).then((res) => {
					let data = res.data
					this.analyse = data.report.content
					let chartData = {
						series: [
							{
								data: [
									{
										"name": data.word_base_text,
										"value": data.word_base
									}, 
									{
										"name": "现实掌握词汇量",
										"value": data.score
									}, 
								]
							},
						]
					};
					this.chartData = JSON.parse(JSON.stringify(chartData));
				}).catch((err) => {
					console.log(err)
				})
			},
		}
	}
</script>

<style lang="less">
	.resylt_top {
		width: 750rpx;
		height: 300rpx;
		position: relative;

		.resylt_top_img {
			image {
				width: 750rpx;
				height: 300rpx;
			}
		}

		.resylt_top_text {
			position: absolute;
			top: 70rpx;
			left: 60rpx;
			font-weight: bold;
			font-size: 48rpx;
			color: #FFFFFF;

			.resylt_top_text_time {
				font-weight: 500;
				font-size: 24rpx;
				color: #FFFFFF;
				opacity: 0.6;
				margin-top: 30rpx;
			}
		}
	}

	.resylt_box {
		width: 92%;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin: -40rpx auto 40rpx;
		padding: 30rpx;
		box-sizing: border-box;
		position: relative;

		.resylt_box_tx {
			width: 110rpx;
			height: 110rpx;
			border-radius: 100%;
			margin: -28rpx auto 0;

			image {
				width: 110rpx;
				height: 110rpx;
				margin: -28rpx auto 0;
			}
		}

		.resylt_box_xin_item {
			width: 40%;
			background: #FBFBFB;
			border-radius: 10rpx;
			margin-top: 20rpx;
			padding: 18rpx 20rpx;
			line-height: 60rpx;
		}
		.resylt_box_char{
			margin: 70rpx auto;
		}
		.resylt_box_text{
			line-height: 40rpx;
		}
	}
	
	.cengji_box{
		width: 420rpx;
		height: 326rpx;
		margin: 40rpx auto 135rpx;
		position: relative;
		image{
			width: 420rpx;
			height: 326rpx;
		}
		.cengji_box1{
			width: 168rpx;
			border-bottom: 1rpx solid #eee;
			text-align: right;
			color: #999999;
			position: absolute;
			top: 83rpx;
			right: -36rpx;
		}
		.cengji_box2{
			width: 128rpx;
			border-bottom: 1rpx solid #eee;
			text-align: right;
			color: #999999;
			position: absolute;
			top: 158rpx;
			right: -36rpx;
		}
		.cengji_box3{
			width: 75rpx;
			border-bottom: 1rpx solid #eee;
			text-align: right;
			color: #999999;
			position: absolute;
			top: 208rpx;
			right: -36rpx;
		}
		.cengji_box4{
			width: 37rpx;
			border-bottom: 1rpx solid #eee;
			text-align: right;
			color: #999999;
			position: absolute;
			top: 288rpx;
			right: -36rpx;
		}
	}
</style>
